<template>
	<view class="storefront">
		<view class="dpxq">
			<view class="vis" style="height: 50px;" v-if="userinfo.orderStatus != 8">
				<view>订单号</view>
				<view>
					<view>{{userinfo.orderNumber}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>订单状态</view>
				<view>
					<view v-if="userinfo.orderStatus == 8">待审核</view>
					<view v-if="userinfo.orderStatus == 1">待支付</view>
					<view v-if="userinfo.orderStatus == 2">已支付</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>买家</view>
				<view>
					<view>{{userinfo.contacts}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>联系方式</view>
				<view>
					<view>{{userinfo.telephone}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>下单时间</view>
				<view>
					<view>{{userinfo.submissionTime}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;" v-if="userinfo.orderStatus != 8">
				<view>最终交易量</view>
				<view>
					<view>{{userinfo.finalTrading}}{{commodity.size}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;" v-if="userinfo.orderStatus != 8">
				<view>合计</view>
				<view>
					<view>{{userinfo.paymentAmount}}元</view>
				</view>
			</view>
		</view>
		<!-- 选择商品 -->
		<view class="select">
			<!-- <view class="titles">{{store.name}}</view> -->
			<view class="lists">
				<view class="list_xx">
					<image mode="aspectFill" :src="commodity.firstPictureUrl" />
					<view class="message">
						<view class="content">
							<view class="text">
								{{commodity.name}}
							</view>
							<view class="msxx">
								{{commodity.description}}
							</view>
							<view class="lbxx">
								<!-- <span>{{userinfo.specification_name}}</span> -->
								<span class="sp2">￥{{userinfo.purchasePrice}}/{{commodity.size}}</span>
							</view>
							<view class="dzs">
								x{{userinfo.number}}{{commodity.startLabel}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="pays" style="margin-bottom: 100px;" v-if="userinfo.orderStatus == 1">
			<view class="titles">支付方式</view>
			<view class="zffs" style="height: 80px;">
				<view class="mode" style="-webkit-flex: 1;flex: 1;">
					<view @click="pay(0)">
						<image style="width: 63px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/wxzf.png" />
					</view>
					<!-- <view @click="pay(1)">
						<image style="width: 67px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/zfbzf.png" />
					</view >
					<view @click="pay(2)">
						<image style="width: 82px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/ylzf.png" />
					</view> -->
					<view @click="pay(3)">
						<image style="width: 17px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/ye.png" />
						余额支付
					</view >
				</view>
				<uni-data-checkbox  style="width: 20px;" selectedColor="#1E9B5E" v-model="radio" :localdata="sex"></uni-data-checkbox>
			</view>
		</view>
		<!-- 立即支付 -->
		<view class="buts" v-if="userinfo.orderStatus == 1">
			<view class="service" @click="$noMultipleClicks(rob)">
				<span class="sp2">立即支付</span>
			</view>
		</view>
	</view>
</template>

<script>
	import { spddxxxxfindById,xcxwxPayFunction,balancePayFunction,resetOrderNumber } from '@/utils/api.js';
	export default {
		data() {
			return {
				noClick:true,
				id:0,
				userinfo:{orderStatus:8},
				commodity:{},
				
				// 支付方式
				radio:0,
				sex: [{
					value: 0// 微信
				},
				// {
				// 	value: 1// 支付宝
				// }, {
				// 	value: 2// 银联
				// },
				{
					value: 3// 余额
				}],
			}
		},
		onLoad(e){
			// console.log(e);
			if(e.id){
				this.id=e.id
				uni.showLoading({
					mask:true,
					title: '加载中...'
				})
				this.spddxxxx()
			}
			
			
			// #ifdef APP-PLUS
			uni.getProvider({
			    service: "payment",
			    success: (e) => {
			        // console.log("payment success:" + JSON.stringify(e));
			        let providerList = [];
			        e.provider.map((value) => {
			            switch (value) {
			                case 'alipay':
			                    providerList.push({
			                        name: '支付宝',
			                        id: value,
			                        loading: false
			                    });
			                    break;
			                case 'wxpay':
			                    providerList.push({
			                        name: '微信',
			                        id: value,
			                        loading: false
			                    });
			                    break;
			                default:
			                    break;
			            }
			        })
			        this.providerList = providerList;
					// console.log(this.providerList);
			    },
			    fail: (e) => {
			        console.log("获取支付通道失败：", e);
			    }
			});
			// #endif
		},
		methods: {
			// 获取订单详情
			spddxxxx(){
				// 获取订单详情
				spddxxxxfindById({
					id:this.id
				}).then((res) => {
					uni.hideLoading();
				    if (res.code === 200) {
				      // console.log(res);
					  this.userinfo=res.data
					  this.commodity=res.data.commodity
					} else {
				      uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 支付选择
			pay(val){
				this.radio=val
				// console.log(this.radio);
				if(val == 1 || val == 2){
					uni.showToast({title:"暂未开通", position: 'bottom'})
				}
			},
			// 提交订单方法
			rob(){
				// console.log(objs);
				let _this=this
				uni.showModal({
					content: "您确定要支付吗？",
					confirmText: "确定",
					cancelText: "取消",
					success: function (res) {
						if (res.confirm) {
							// _this.noClick=false
							// console.log('用户点击确定');
							uni.showLoading({
								mask:true
							})
							
							if(_this.radio == 0){
								// console.log('微信');
								// #ifdef MP-WEIXIN
								_this.wxPayFunction(_this.userinfo)
								// #endif
							}else if(_this.radio == 3){
								_this.balancePayFunction(_this.userinfo)
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
								
			},
			// 微信支付
			wxPayFunction(orderInfo){
				// 微信支付
				xcxwxPayFunction({
					orderNumber:orderInfo.orderNumber
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res.data);
						this.requestPayment(res.data,"wxpay")
				    } else {
				      uni.showToast({title:res.message, position: 'bottom',icon:'none'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom',icon:'none'})
				});
			},
			// 支付
			requestPayment(e,zflx) {
				let _this=this
			    let orderInfo = e;
			    // console.log("得到订单信息", orderInfo,zflx);
			    // uni.requestPayment({
			    //     provider: zflx,
			    //     orderInfo: orderInfo,
			    //     success: (e) => {
			    //         // console.log("success", e);
			    //         uni.showToast({
			    //             title: "支付成功!"
			    //         })
			    //     },
			    //     fail: (e) => {
			    //         // console.log("fail", e);
			    //         uni.showModal({
			    //             content: "支付失败",
			    //             showCancel: false
			    //         })
			    //     },
			    //     complete: () => {
			    //         setTimeout(() => {
			    //         	uni.hideLoading()
			    //         	uni.navigateBack({delta: 1})
			    //         }, 1000);
			    //     }
			    // })
			
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: orderInfo.timeStamp,
				    nonceStr: orderInfo.nonceStr,
				    package: orderInfo.package,
				    signType: 'MD5',
				    paySign: orderInfo.paySign,
					success: function (res) {
						// console.log(res);
						uni.hideLoading()
						uni.showToast({
						    title: "支付成功!"
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.navigateBack({delta: 1})
						}, 1000);
					},
					fail: function (err) {
						// console.log(err);
						uni.hideLoading()
						uni.showModal({
						    content: "支付失败",
						    showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// _this.noClick=false
									// console.log('用户点击确定');
									uni.showLoading({
										mask:true
									})
									_this.resetOrderNumber()
								} else if (res.cancel) {
									// console.log('用户点击取消');
								}
							}
						})
					},
				    complete: () => {
				        // setTimeout(() => {
				        // 	uni.hideLoading()
				        // 	uni.navigateBack({delta: 1})
				        // }, 1000);
				    }
				});
				
			},
			// 余额支付
			balancePayFunction(orderInfo){
				// 余额支付
				balancePayFunction({
					orderNumber:orderInfo.orderNumber
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res);
						uni.showToast({
						    title: "支付成功!"
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.navigateBack({delta: 1})
						}, 1000);
				    } else {
				      uni.showToast({title:res.message, position: 'bottom',icon:'none'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom',icon:'none'})
				});
			},
			
			// 更新订单号
			resetOrderNumber(){
				let _this=this
				// 余额支付
				resetOrderNumber({
					id:_this.userinfo.id
				}).then((res) => {
					uni.hideLoading()
					// _this.noClick=true
				    if (res.code === 200) {
						// console.log(res);
						// uni.showToast({
						//     title: "更新成功!"
						// })
						setTimeout(() => {
							// uni.hideLoading()
							// uni.navigateBack({delta: 1})
							uni.showLoading({
								mask:true,
								title: '加载中...'
							})
							_this.spddxxxx()
						}, 1000);
				    } else {
				      uni.showToast({title:res.message, position: 'bottom',icon:'none'})
				    }
				}).catch((err) => {
					uni.hideLoading()
					// _this.noClick=true
					uni.showToast({title:'网络繁忙', position: 'bottom',icon:'none'})
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.storefront{
		padding: 10px;
		.dpxq{
			background: #FFFFFF;
			border-radius: 10px;
			padding: 0 10px;
			margin-bottom: 10px;
			.vis{
				border-bottom: 1px solid #D8D8D8;
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: $mainText;
				line-height: 22px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view:nth-child(2){
					font-weight: 400;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
			.vis:last-child{
				border-bottom: none;
				// display: flex;
				// flex-direction: column;
				// align-items: flex-start;
				// justify-content: flex-start;
				// view:nth-child(1){
				// 	height: 50px;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: space-between;
				// }
				// view:nth-child(2){
				// 	padding: 0 10px;
				// 	height: 40px;
				// 	font-weight: 400;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: space-between;
				// }
			}
		}
		.select{
			padding: 20px 10px;
			background: #FFFFFF;
			border-radius: 10px;
			margin-bottom: 10px;
			.titles{
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: $mainText;
				line-height: 50px;
			}
			.lists{
				width: 100%;
				.list_xx{
					width: 100%;
					// height: 110px;
					// margin-bottom: 10px;
					display: flex;
					image{
						width: 100px;
						height: 100px !important;
						border-radius: 8px;
					}
					.message{
						width: 64%;
						// height: 110px;
						padding: 0 10px;
						display: flex;
						.content{
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.text{
								width: 100%;
								font-size: 18px;
								font-family: PingFangSC-Medium, PingFang SC;
								color: $mainText;
								line-height: 25px;
								font-weight: bold;
								overflow:hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow:ellipsis;
							}
							.msxx{
								width: 100%;
								font-size: 16px;
								font-family: PingFangSC-Medium, PingFang SC;
								color: #666;
								line-height: 25px;
								font-weight: bold;
								// overflow: hidden;
								// display: -webkit-box;
								// text-overflow: ellipsis;
								// -webkit-line-clamp: 2;  /*要显示的行数*/
								// -webkit-box-orient: vertical;
								overflow:hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow:ellipsis;
							}
							.lbxx{
								width: 100%;
								font-size: 20px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666;
								line-height: 25px;
								.sp2{
									font-size: 12px;
									// margin-left: 10px;
								}
							}
							.dzs{
								margin-top: 5px;
								text-align: right;
								font-size: 15px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 18px;
								
								::v-deep .uni-numbox{
									justify-content: flex-end;
									.uni-numbox__plus,.uni-numbox__minus{
										width: 20px;
										height: 20px;
										background: #FFFFFF !important;
										border-radius: 8px;
										border: 1px solid #1E9B5E;
										padding: 0 !important;
										.uni-numbox--text{
											color: #1E9B5E !important;
										}
									}
									.uni-numbox__minus{
										
									}
									.uni-numbox__value{
										width: 30px;
										height: 20px;
										background: #FFFFFF !important;
										border-radius: 8px;
										border: 1px solid #1E9B5E;
										color: #1E9B5E !important;
										margin: 0 5px;
									}
								}
							}
						}
					}
					
				}
			}
		}
		
		.pays{
			padding: 0 10px 10px 10px;
			background: #FFFFFF;
			border-radius: 10px;
			margin-bottom: 10px;
			.titles{
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: $mainText;
				line-height: 50px;
			}
			.zffs{
				// height: 80px;
				display: flex;
				justify-content: space-between;
				.mode{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					view{
						display: flex;
						align-items: center;
						image{
							margin-right: 10px;
						}
					}
					.servexz{
						view:nth-child(1){
							font-size: 16px;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 600;
							color: $mainDeepText;
						}
						view:nth-child(2){
							margin-left: 20px;
							font-size: 16px;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 500;
							color: $mainDeepText;
						}
						
					}
				}
				::v-deep .uni-data-checklist{
					flex: 0;
					height: 100%;
					.checklist-group{
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.checklist-box{
							margin: 0;
						}
					}
				}
			}
		}
		.buts{
			width: 100%;
			height: 110rpx;
			position: fixed;
			bottom: 50rpx;
			.service{
				width: 95%;
				height: 110rpx;
				background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
				box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
				border-radius: 56rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.sp2{
					font-size: 36rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 110rpx;
					padding: 0 10rpx;
				}
			}
		}
	}
</style>
